<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%; /* 确保页面宽度占满整个视口 */
            height: 100%; /* 确保页面高度占满整个视口 */
            background: url(/static/pic/bt.jpg) no-repeat center;
            background-size: cover; /* 让背景照片铺满整个页面 */
        }
        .layui-card {
            width: 35%;
            margin: 10px auto 0;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 100px;
            text-align: right;
        }

        .button-container {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header button-container" style="font-size: 20px; color: #333; text-align: center;">个人信息</div><br><br>
    <form class="layui-form" lay-filter="updateFormFilter" action="">
        <div class="layui-form-item">
            <input type="hidden" name="id" id="id">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="name" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="account" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <div class="layui-upload-list">
                        <img width="150px" height="150px" class="layui-upload-img" id="demo1">
                        <input type="hidden" name="image" id="imageId">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" lay-verify="email" disabled placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="phone" name="phone" lay-verify="phone" disabled placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="button-container">
                <button type="button" class="layui-btn layui-bg-blue" lay-submit lay-filter="submitUpdateInfo">修改个人信息</button>
                <button type="button" class="layui-btn layui-bg-orange" lay-submit lay-filter="submitUpdateAP">修改账号密码</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form'], function(){
        var form = layui.form;

        $.post(
            '/admin/selectByInfoId',
            function (result) {
                if (result.code == 0) {
                    form.render('select');
                    form.val('updateFormFilter', result.data);
                    $('#imageId').val(result.data.image);
                    $('#demo1').attr('src', result.data.image);

                }
            },
            'json'
        );

        form.on('submit(submitUpdateInfo)', function (data) {
            var field = data.field;
            console.log(field);
            layer.open({
                title: '修改个人信息',
                type: 2,
                area: ['35%', '90%'],// 宽高
                content: '/page/admininfo/updateinfo?id='+field.id,
            });
        })

        form.on('submit(submitUpdateAP)', function (data) {
            var field = data.field;
            console.log(field);
            layer.open({
                title: '修改密码',
                type: 2,
                area: ['35%', '70%'],// 宽高
                content: '/page/admininfo/updatepassword?id='+field.id,
            });
        })
    });
</script>
</body>
</html>